@page
@{ Layout = "_LayoutApp"; }
@section Styles{
    <style>
        html {
            overflow-x: hidden !important;
        }
        body{
            margin:0;
            padding:0;
        }
        svg{
            touch-action:auto;
        }
    </style>
}
<div class="bg-cover py-8 text-white text-center rounded-0" :style="{'background-image':'url('+(user.avatarbgUrl || DEFAULT_AVATAR_BG_URL)+')'}">
    <div class="py-3"><span class="fs-6"><i class="bi bi-calendar-event me-2"></i>{{ dateStr }}</span></div>
</div>
<div class="p-3 animate__animated animate__zoomIn">
    <div class="mt-n8">
        <div class="bg-white p-2 rounded-pill d-flex justify-content-between align-items-center smooth-shadow-lg">
            <span class="d-flex justify-content-start align-items-center">
                <i class="bi bi-person-fill me-2 fs-2 ms-4"></i><span>欢迎：{{ user.displayName }}</span>
            </span>
            <img :src="user.avatarUrl || DEFAULT_AVATAR_URL" class="img-fluid avatar-xl rounded-circle bg-light p-1">
        </div>
    </div>
</div>
<div class="p-3">
    <div class="mb-3">
        <div class="row g-3">
            <div class="col-xl-5 col-lg-5 col-md-5 col-5">
                <div class="card  border-end-0 border-bottom-0 border-top-0 border-5 rounded-4 card-hover-with-icon shadow-lg border-warning animate__animated animate__fadeInLeft" v-on:click="top.$vue.btnAppMenuClick('studyPlan')">
                    <div class="card-body text-center py-3">
                        <div class="icon-shape icon-xxl rounded-circle bg-warning text-white mb-4 card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"></path>
                            </svg>
                        </div>
                        <div class="text-center">
                            <p class="mb-2">培训学分</p>
                            <div class="mb-0">
                                <span>{{ studyPlanTotalOverCredit }}</span>
                                <span class="vr mx-1 text-gray-200"></span>
                                <span class="fs-6">{{ studyPlanTotalCredit }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-7 col-lg-7 col-md-7 col-7">
                <div class="row g-3">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                        <div class="card rounded-4 border-start-0 border-bottom-0 border-top-0 border-5 border-success card-hover-with-icon shadow-lg animate__animated animate__fadeInRight" v-on:click="top.$vue.btnAppMenuClick('studyCourse')">
                            <div class="card-body d-flex align-items-center justify-content-between py-3">
                                <div class="icon-shape icon rounded-circle bg-success text-white card-icon p-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
                                        <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                        <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"></path>
                                    </svg>
                                </div>
                                <div class="text-end">
                                    <div class="mb-0">完成课程</div>
                                    <div class="mb-0 ">
                                        <span class="text-success">{{ totalOverCourse }}</span>
                                        <span class="vr mx-1 text-gray-200"></span>
                                        <span class="text-warning fs-6">{{ totalCourse }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                        <div class="card rounded-4 border-start-0 border-bottom-0 border-top-0 border-5 border-primary card-hover-with-icon shadow-lg animate__animated animate__fadeInRight" v-on:click="top.$vue.btnAppMenuClick('studyCourse')">
                            <div class="card-body d-flex align-items-center justify-content-between py-3">
                                <div class="icon-shape icon rounded-circle bg-primary text-white card-icon p-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
                                        <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
                                    </svg>
                                </div>
                                <div class="text-end">
                                    <div class="mb-0">学习时长</div>
                                    <div class="mb-0 ">
                                        <span class="text-success fs-6">{{ utils.formatDurationCN(totalDuration) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
<div class="card rounded-0 mb-3 shadow-lg" v-on:click="top.$vue.btnAppMenuClick('studyPlan')">
    <div class="card-body">
        <h5 class="card-title d-flex justify-content-between align-items-center">
            <span><img class="me-2" src="/sitefiles//assets/images/ing.gif" />任务进度</span>
            <span><span class="fs-4 text-success">{{ planOverCount }}</span>/<span class="fs-6">{{ planCount }}</span></span>
        </h5>
        <div class="progress w-100" role="progressbar">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success text-end" :style="{width:(utils.formatPercentFloat(planOverCount,planCount))+'%'}">{{ utils.formatPercentFloat(planOverCount,planCount) }}%</div>
        </div>
    </div>
</div>
 <div class="p-3">
    <div class="mb-3" v-on:click="top.$vue.btnAppMenuClick('exam')">
        <div class="text-center">
            <div class="mb-2">
                <i class="bi bi-journal-medical fs-4 me-2 text-warning"></i>
                累计考试<span class="text-primary fw-bold mx-2">{{ examTotal }}</span>场
            </div>
            <div class="mt-3">
                <apexchart type="radialBar" :options="passChartOptions" :series="passSeries"></apexchart>
            </div>
        </div>
    </div>
    <div class="mb-3">
        <div class="row g-3">
            <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                <div class="card rounded-4 border-start-0 border-top-0 border-end-0 border-5 border-success card-hover-with-icon shadow-lg" v-on:click="goMoni">
                    <div class="card-body d-flex align-items-center justify-content-between py-3">
                        <div>
                            <i class="bi bi-journals text-primary fs-3"></i>
                        </div>
                        <div class="text-end">
                            <div class="mb-1 fs-6">模拟<span class="text-primary fw-bold mx-2">{{ examMoniTotal }}</span>场</div>
                            <div class="mb-0 fs-6">
                                及格率<span class="text-primary fw-bold mx-1">{{ examMoniPercent }}</span>%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                <div class="card rounded-4 border-start-0 border-end-0 border-top-0 border-5 border-success card-hover-with-icon shadow-lg" v-on:click="goShuati">
                    <div class="card-body d-flex align-items-center justify-content-between py-3">
                        <div>
                            <i class="bi bi-journal-check text-primary fs-3"></i>
                        </div>
                        <div class="text-end">
                            <div class="mb-1 fs-6">刷题<span class="text-primary fw-bold mx-2">{{ practiceAnswerTmTotal }}</span>道</div>
                            <div class="mb-0 fs-6">
                                正确率<span class="text-primary fw-bold mx-1">{{ practiceAnswerPercent }}</span>%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>最新学习任务</span>
            <el-link :underline="false" v-on:click="top.$vue.btnAppMenuClick('studyPlan')">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-if="studyPlan && studyPlan.id>0" v-on:click="studyPlan.isStudy ? btnViewPlanClick(studyPlan.id) : utils.error('计划不在有效期内')">
        <div class="card-body p-0">
            <div>
                <div>
                    <div class="bg-cover rounded-top-4 p-8" :style="{'background-image':'url('+studyPlan.plan.coverImg+')'}"></div>
                    <div class="card rounded-0 rounded-bottom-4 card-hover position-relative p-3 px-4">
                        <div class="position-absolute top-50 end-0 translate-middle-y pe-3">
                            <img width="88" src="/sitefiles/assets/images/status/weikaishi.png" v-if="studyPlan.state==='Weikaishi'" />
                            <img width="88" src="/sitefiles/assets/images/status/xuexizhong.png" v-if="studyPlan.state==='Xuexizhong'" />
                            <img width="88" src="/sitefiles/assets/images/status/yidabiao.png" v-if="studyPlan.state==='Yidabiao'" />
                            <img width="88" src="/sitefiles/assets/images/status/weidabiao.png" v-if="studyPlan.state==='Weidabiao'" />
                            <img width="88" src="/sitefiles/assets/images/status/yiwancheng.png" v-if="studyPlan.state==='Yiwancheng'" />
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-12 col-xl-12 col-lg-12">
                                <div class="mt-1">
                                    <div class="mb-2 fw-semibold"><a href="javascript:;" class="text-inherit">{{ studyPlan.plan.planName }}</a></div>
                                    <ul class="mb-2 list-inline">
                                        <li class="list-inline-item">
                                            <span class="fw-light fs-5">计划年度：</span><span class="fw-bold text-warning">{{ studyPlan.plan.planYear }}</span>
                                        </li>
                                    </ul>
                                    <ul class="mb-2 list-inline">
                                        <li class="list-inline-item">
                                            <span class="fw-light fs-5">计划学分：</span><span class="fw-bold text-success">{{ studyPlan.totalCredit }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.planCredit }}</span>
                                        </li>
                                    </ul>
                                    <ul class="mb-3 list-inline">
                                        <li class="list-inline-item">
                                            <span class="fw-light fs-5">必修课：</span><span class="fw-bold text-success">{{ studyPlan.overCourseTotal }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.totalCount }}</span>
                                        </li>
                                        <li class="list-inline-item">
                                            <span class="fw-light fs-5">选修课：</span><span class="fw-bold text-success">{{ studyPlan.overSelectCourseTotal }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.selectTotalCount }}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="row align-items-center g-0">
                                    <div class="col-auto">
                                        <i class="bi bi-calendar-range text-warning"></i>
                                    </div>
                                    <div class="col ms-2">
                                        <span>{{ studyPlan.plan.planBeginDateTimeStr }} -  {{ studyPlan.plan.planEndDateTimeStr }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无安排</small>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>新上课程</span>
            <el-link :underline="false" v-on:click="top.$vue.btnAppMenuClick('studyCourse')">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-if="courseList && courseList.length>0">
        <div class="card-body">
            <div>
                <div class="d-flex flex-row overflow-x-auto">
                    <div class="me-3 mb-3" v-for="course in courseList" style="min-width:200px;">
                        <div class="card rounded-4 border bg-white p-2" v-on:click="btnViewCourseClick(course)" style="cursor:pointer;">
                            <div class="position-relative p-8 rounded-4 bg-cover" :style="{'background-image':'url('+course.coverImg+')'}">
                                <el-tag class="position-absolute bottom-0 end-0 m-2" size="mini" type="primary" effect="plain" v-if="course.offLine">面授课</el-tag>
                                <el-tag size="mini" class="bg-dark text-white position-absolute bottom-0 end-0 m-2 fs-6" v-else>{{ utils.formatDuration(course.duration) }}</el-tag>
                                <el-tag size="mini" type="success" effect="dark" class="position-absolute top-0 end-0 m-2" v-if="course.state==='Yiwancheng'">{{ course.stateStr }}</el-tag>
                                <el-tag size="mini" type="warning" effect="dark" class="position-absolute top-0 end-0 m-2" v-else>{{ course.stateStr }}</el-tag>
                                <span class="position-absolute bottom-0 start-0 m-2">
                                    <el-tag size="mini" type="primary" effect="dark" class="me-1">{{ course.courseType}}</el-tag>
                                </span>
                            </div>
                            <div class="mt-3 p-2">
                                <div class="mb-3 fw-semibold">
                                    {{ course.name }}
                                </div>
                                <div class="mb-3 lh-1">
                                    <span>
                                        <i class="bi bi-star-fill text-warning me-1"></i>
                                        <span>{{ course.evaluationAvg }}</span>
                                    </span>
                                    <span class="mx-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                             fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                            <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                        </svg>
                                    </span>
                                    <span>
                                        <i class="bi bi-person-video3 me-1"></i>
                                        <span>{{ course.totaEvaluationlUser }}</span>
                                    </span>
                                </div>
                                <div class="lh-1">
                                    <i class="bi bi-credit-card-2-front-fill me-1"></i><span>{{ course.studyHour }}</span> 课时
                                    <span class="mx-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                             fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
                                            <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                        </svg>
                                    </span>
                                    <span class="text-success" v-if="course.state==='Yiwancheng'">{{ course.credit }}学分</span>
                                    <span v-else>{{ course.credit }}学分</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无课程</small>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>最新考试安排</span>
            <el-link :underline="false" v-on:click="top.$vue.btnAppMenuClick('exam')">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-if="examPaper" v-on:click="btnViewPaperClick(examPaper)">
        <div class="card-body">
            <div class="mb-3">
                {{ examPaper.title }}
            </div>
            <div class="row align-items-center g-3 mb-3">
                <div class="col">
                    <div>
                        <div class="fw-light">
                            <div class="mb-1">总分：{{examPaper.totalScore}}<span class="me-1"></span>及格分：{{examPaper.passScore}}</div>
                            <div class="mb-1">
                                考试次数：
                                <span class="text-success fw-bold" v-if="(examPaper.userExamTimes-examPaper.myExamTimes)>0">
                                    {{examPaper.userExamTimes-examPaper.myExamTimes}}
                                </span>
                                <span class="fs-3 text-danger fw-bold" v-else>
                                    0
                                </span>
                                /{{examPaper.userExamTimes}}
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="bg-light p-2 rounded-circle">
                        <el-button type="primary" circle icon="el-icon-s-order" class="p-3"></el-button>
                    </div>
                </div>
            </div>
            <div><i class="bi bi-calendar2 me-2 text-warning"></i>开考时间：{{ examPaper.examStartDateTimeStr }}</div>
        </div>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无考试安排</small>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>刷题练习</span>
            <el-link :underline="false" v-on:click="goShuati">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg">
        <div class="card-body">
            <div class="py-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <el-progress type="dashboard" :percentage="practiceCollectPercent" color="#5cb87a" :width="88" :stroke-width="8"></el-progress>
                    </div>
                    <div class="text-center">
                        <div class="mb-1 p-2 bg-light w-100 rounded-pill">
                            <el-button type="success" class="py-3 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('Collect')"><i class="bi bi-person-hearts me-2"></i>收藏练习</el-button>
                        </div>
                        <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceCollectTmTotal }}</span>道题</div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <el-progress type="dashboard" :percentage="practiceWrongPercent" color="#5cb87a" :width="88" :stroke-width="8"></el-progress>
                    </div>
                    <div class="text-center">
                        <div class="mb-1 p-2 bg-light w-100 rounded-pill">
                            <el-button type="danger" class="py-3 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('Wrong')"><i class="bi bi-backspace-reverse me-2"></i>错题练习</el-button>
                        </div>
                        <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceWrongTmTotal }}</span>道题</div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <el-progress type="dashboard" :percentage="practiceAllPercent" color="#5cb87a" :width="88" :stroke-width="8"></el-progress>
                    </div>
                    <div class="text-center">
                        <div class="mb-1 p-2 bg-light w-100 rounded-pill">
                            <el-button type="primary" class="py-3 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('All')"><i class="bi bi-fast-forward-circle-fill me-2"></i>快速开始</el-button>
                        </div>
                        <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceAllTmTotal }}</span>道题</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>最新模拟测试</span>
            <el-link :underline="false" v-on:click="goMoni">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-if="examMoni" v-on:click="btnViewPaperClick(examMoni)">
        <div class="card-body">
            <div class="mb-3">
                {{ examMoni.title }}
            </div>
            <div class="row align-items-center g-3">
                <div class="col">
                    <div>
                        <div class="fw-light">
                            <div class="mb-1">总分：{{examMoni.totalScore}}<span class="me-1"></span>及格分：{{examMoni.passScore}}</div>
                            <div class="mb-1">
                                考试次数：
                                <span class="text-success fw-bold" v-if="(examMoni.userExamTimes-examMoni.myExamTimes)>0">
                                    {{examMoni.userExamTimes-examMoni.myExamTimes}}
                                </span>
                                <span class="fs-3 text-danger fw-bold" v-else>
                                    0
                                </span>
                                /{{examMoni.userExamTimes}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="bg-light p-2 rounded-circle">
                        <el-button type="primary" circle icon="el-icon-s-order" class="p-3"></el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无安排</small>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>最近获得证书</span>
            <el-link :underline="false" v-on:click="goCer">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-if="topCer && topCer.id>0" v-on:click="btnViewCer(topCer)">
        <div class="card-body">
            <div class="card card-hover">
                <div class="row g-0">
                    <img :src="topCer.cerImg" class="w-100 rounded-3">
                </div>
            </div>
        </div>
    </div>
    <div class="card rounded-4 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无证书</small>
            </div>
        </div>
    </div>
</div>
<div class="my-8 text-center">
    <img :src="DEFAULT_LOGO_URL" height="38" class="mb-3" />
    <div class="text-center">
        <small>© {{ DOCUMENTTITLE }} <span class="text-warning">v{{ version }}</span></small>
    </div>
</div>
<div class="py-8"></div>
<div style="position:fixed;right:0;top:80%;" v-if="taskTotal>0" class="animate__animated animate__fadeInRightBig">
    <button type="button" class="btn btn-dark rounded-start-pill" v-on:click="taskDialogVisible=true">
        <i class="bi bi-ui-checks-grid text-gray-300"></i><span class="mx-2 fs-4 text-light">{{ taskTotal }}</span>
    </button>
</div>
<template>
    <el-drawer title="待完成"
               size="70%"
               :visible.sync="taskDialogVisible"
               direction="btt">
        <div class="px-2">
            <div class="card rounded-0">
                <div class="card-body">
                    <ul class="list-group lh-lg">
                        <li class="list-group-item d-flex justify-content-between align-items-center" v-if="taskPlanTotal>0" v-on:click="top.$vue.btnAppMenuClick('studyPlan')">
                            <span><i class="text-warning bi bi-star-half me-2"></i>待完成学习任务</span>
                            <span class="badge bg-primary ">{{ taskPlanTotal }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center" v-if="taskCourseTotal>0" v-on:click="top.$vue.btnAppMenuClick('studyCourse')">
                            <span>
                                <i class="text-warning bi bi-star-half me-2"></i>待完成课程
                            </span>
                            <span class="badge bg-primary ">{{ taskCourseTotal }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center" v-if="taskPaperTotal>0" v-on:click="top.$vue.btnAppMenuClick('exam')">
                            <span>
                                <i class="text-warning bi bi-star-half me-2"></i>待参加考试
                            </span>
                            <span class="badge bg-primary ">{{ taskPaperTotal }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center" v-if="taskQTotal>0" v-on:click="goWenjuan">
                            <span>
                                <i class="text-warning bi bi-star-half me-2"></i>待填写问卷
                            </span>
                            <span class="badge bg-primary ">{{ taskQTotal }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center" v-if="taskAssTotal>0" v-on:click="goAss">
                            <span>
                                <i class="text-warning bi bi-star-half me-2"></i>待填写测评
                            </span>
                            <span class="badge bg-primary ">{{ taskAssTotal }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="py-5 text-center">
                <button type="button" class="btn btn-primary" v-on:click="taskDialogVisible=false"><i class="el-icon-close me-2"></i>关 闭</button>
            </div>
        </div>
    </el-drawer>
</template>
@section Scripts{
    <script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/app/dashboard.js" type="text/javascript"></script> }